<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="header-box">
        <span>作业范围分配</span>
        <div style="float: right;">
          <el-button v-if="true" style=" width: 90px; border: 1px solid rgb(225, 85, 54)" type="primary"><span>编辑</span></el-button>
          <el-button v-else-if="true" style=" width: 90px; border: 1px solid rgb(225, 85, 54)" type="primary"><span>保存</span></el-button>
          <el-button v-else style=" width: 90px; border: 1px solid rgb(225, 85, 54)"><span>取消</span></el-button>
        </div>
      </div>
      <div class="searchBox">
        <div class="keyword">
          <label for="">地区关键词： </label>
          <el-input v-model="input3" placeholder="请输入地区关键词" @input="inputfz" />
        </div>
      </div>
      <div class="map active">
        <!--
    scroll-wheel-zoom是是否可以缩放
    @ready是图加载完后触发事件
    center是位置定位
    zoom是缩放大小限制
    inertial-dragging是允许惯性拖拽
   -->
        <baidu-map
          class="bm-view"
          :zoom="15"
          :center="center"
          inertial-dragging
          :scroll-wheel-zoom="true"
          @mousemove="syncPolyline"
          @click="paintPolyline"
          @rightclick="newPolyline"
        >
          <bm-local-search
            :keyword="keyword"
            :auto-viewport="true"
            :panel="false"
          />
          <bm-control>
            <button @click="toggle('polyline')">{{ polyline.editing ? '停止绘制' : '开始绘制' }}</button>
          </bm-control>
          <bm-polyline v-for="path of polyline.paths" :key="path" :path="path" />
        </baidu-map>
      </div>

    </el-card>
  </div>

</template>

<script>
import { BaiduMap, BmLocalSearch } from 'vue-baidu-map'
import { getBusinessScopeApi } from '@/api/courier'
export default {
  components: {
    BaiduMap,
    BmLocalSearch
  },
  data() {
    return {
      // 定位位置信息
      center: {
        lat: '',
        lng: ''
      },
      // 检索关键字
      keyword: '',
      // 输入框input值
      input3: '',
      // 绘制
      polyline: {
        editing: false,
        paths: []
      }
    }
  },
  created() {
    this.getScope()
  },
  mounted() {

  },
  methods: {
    // 输入框
    inputfz() {
      this.keyword = this.input3
    },
    // 获取业务范围
    async getScope() {
      const res = await getBusinessScopeApi({
        id: this.$route.params.id,
        type: 2
      })
      // console.log(res)
      this.center.lat = res.latitude
      this.center.lng = res.longitude
      // console.log(res.latitude)
      // console.log(res.longitude)
    },
    // 绘制
    toggle(name) {
      this[name].editing = !this[name].editing
    },
    syncPolyline(e) {
      // 如果当前线段未编辑，则直接返回
      if (!this.polyline.editing) {
        return
      }
      // 获取当前线段的路径
      const { paths } = this.polyline
      // 如果路径为空，则直接返回
      if (!paths.length) {
        return
      }
      // 获取当前线段的最后一个路径
      const path = paths[paths.length - 1]
      // 如果路径的长度为0，则直接添加新的点
      if (!path.length) {
        return
      }
      // 如果路径的长度为1，则将新的点添加到路径的末尾
      if (path.length === 1) {
        path.push(e.point)
      }
      // 将新的点添加到路径的末尾
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline(e) {
      // 如果当前组件不是编辑状态，则直接返回
      if (!this.polyline.editing) {
        return
      }
      // 获取当前组件的路径
      const { paths } = this.polyline
      // 如果路径为空，则添加一个空数组
      if (!paths.length) {
        paths.push([])
      }
      // 获取最后一个路径
      const path = paths[paths.length - 1]
      // 将最后一个路径的最后一个元素添加到路径中
      path.pop()
      // 如果路径有元素，则添加一个空数组
      if (path.length) {
        paths.push([])
      }
    },
    paintPolyline(e) {
      // 如果polyline不是编辑状态
      if (!this.polyline.editing) {
        return
      }
      // 获取polyline的路径
      const { paths } = this.polyline
      // 如果路径为空，则添加一个空数组
      !paths.length && paths.push([])
      // 将e.point添加到路径末尾
      paths[paths.length - 1].push(e.point)
    }
  }
}

</script>

<style lang="scss" scoped>
/* 给个宽高 */
.bm-view {
  width: 100%;
  height: 440px;
}

::v-deep .el-card__body{
  width: 100%;
  height: auto;
  padding: 0;
}
.header-box{
    padding: 0 25px;
    border-bottom: 0;
    background: #f8faff;
    font-size: 16px;
    font-weight: 700;
    color: #2a2929;
    height: 60px;
    line-height: 60px;
}
.searchBox{
    display: flex;
    padding-left: 25px;
    padding-top: 20px;
    .el-input {
      width: 230px;
    }
    label{
      color: #20232a;
      font-weight: 400;
      font-size: 14px;
    }
    .keyword{
      margin-right: 30px;
    }
}
.map{
  padding: 22px 25px;
}

</style>
